<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>公告</title>

		<script type="text/javascript" src="js/jquery-2.1.0.js">
		</script>
		<link rel="stylesheet" type="text/css" href="css/index.css" />

		<!-- 声明文档兼容模式，表示使用IE浏览器的最新模式 -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!-- 设置窗口的宽度，页面初始缩放值 -->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

		<!-- Bootstrap 核心样式文件 -->
		<link href="lib/css/bootstrap.min.css" rel="stylesheet">

		<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
        <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->

		<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
		<script src="lib/jquery.min.js"></script>
		<!-- Include all compiled plugins (below), or include individual files as needed -->
		<script src="lib/js/bootstrap.min.js"></script>


		<script type="text/javascript">
			$(window).on("load resize", function() {
				var h = window.innerHeight || document.body.clientHeight || document.documentElement.clientHeight;
				$("body").css("height", h);

			});
			
		   function	shareBtnClick(){
		   	document.getElementById('shareBgView').style.display='block';
		    
				
			}
		   
		   function knownClick(){
		   	document.getElementById('shareBgView').style.display='none';
		   }


            $(function($) {

				$.ajax({
					type: 'GET',
					url: 'http://www.sg01.top:8082/listEventTopPlayer',
					dataType: 'JSON',
					success: function(data) {
						for(var i = 0; i < data.length; i++) {
							var obj = data[i];

							$("#eventList").append('<h4 class="text-center" style="margin: 40px auto 15px auto;">' + obj.event + '</h4>');
							$("#eventList").append('<table border="1px" bordercolor="gray" class="table table-striped" cellspacing="0" cellpadding="0"><tbody id="tbody' + i + '"></table></tbody>');
							var id = "tbody" + i;
							$("#" + id).append('<tr><th class="text-center ">排名</th><th class="text-center">玩家ID</th><th class="text-center">得分</th></tr>');
							var list = obj.list;
							for(var j = 0; j < list.length; j++) {

								$("#" + id).append('<tr><td class="text-center">' + (j + 1) +
									'</td><td class="text-center">' + list[j].user_id +
									'</td><td class="text-center">' + list[j].score + '</td></tr>');
							}
						}
					}
				});
			});
		</script>

		<style>
			
			tbody tr th {
				color: #31B0D5;
				font-weight: bold;
				background-color: gainsboro;
			}

			#shareBgView{
				z-index: 1;
				position: fixed;
				width: 100%;
				height: 100%;
				background: rgba(0,0,0,0.7);
				display: none;
				
			}
		    #shareView{
		    	    z-index: 2;
		    	    margin-top:180px;
		    	    margin-left: 20%;
		    	    width: 60%;
		    	    
		    	    background-color: white;
		    	    border: solid deepskyblue 1px;
		    
		    }
		    #shareBtn{
		    			    z-index: 3;
		    			    display: inline-block;
		    			    background-color:deepskyblue ;
		    			    color: white;
		    			    border: solid white 1px;
		    			    width: 80px;
		    			    height: 30px;
		    			    
		    			    border-radius: 5;
		    			    display: inline-block;
		    			    float: right;
		    }
		    
		</style>
	</head>

	<body class="body" style="background-color: #F5F5F5; height: auto;">
	<div id="shareBgView">
           <div id="shareView">
            	<h4 style="text-align: center;">分享给好友</h4>
            	<p style="padding: 0 10px;">文本内容已复制：太刺激了，打广告，还有大奖可拿，赶快来下载吧！下载地址：www.baidu.com，我在这里等你呦！
            </p>
            <button style="width: 100%;height: 50px;text-align: center;color: white;background-color:deepskyblue;display: inline-block;border-top:solid deepskyblue 1px ;" type="button" onclick="knownClick()">知道了，马上发送给好友</button>
           </div>
	</div>
	<button id="shareBtn" type="button" onclick="shareBtnClick()">分享</button>
	
	
		<div class="container">
			<div class="col-lg-12">
				
				<div class="text-center" style="margin: 30px auto;background-color: orange;">
					<h3>公告</h3>
					
				</div>
				
                <p>游戏规则：玩家在有限的子弹条件下击中气球的个数更多更精准则得到的分数更多，每过一关会赠送固定个数的弹药;</p>
                <p>游戏奖励：玩家在游戏的过程中给好友点赞，好友会得到系统赠送的弹药，供玩家弹药不足时使用；最终得分较高的玩家将进行公示并获得平台奖品;</p>
                <p>郑重声明：本游戏欢迎大众参与，但坚决抵制刷分造假等违法行为，对于此行为的玩家平台将予以警告甚至注销账号处理，所获的奖励不予发放;</p>
                <p>温馨提示：适当游戏有益，过度游戏伤身，请玩家劳逸结合，注意休息;</p>
			</div>
s
			<h4 style="text-align: center;margin-top: 30px">本期获奖玩家公示</h4>
			<div class="text-center" style="margin:0px auto;" id="eventList">
			</div>
		</div>

	</body>

	

</html>
